<template>
  <div class="home">
    <div class="app_bg"></div>
    <div>
      <HomeHeader />
      <!-- 游戏类型tab切换 -->
      <div class="custom_tab">
        <ul class="custom_tab_ul" ref="tabRef">
          <li v-for="item in gameTabs" :key="item.paneKey" :class="[
            isActive === item.id
              ? 'custom_tab_li custom_tab_item_active'
              : 'custom_tab_li',
          ]" @click="handleTabs(item)">
            <div class="custom_tab_item">
              <img class="tab_item" v-if="![0, -1].includes(item.id)" :src="isActive === item.id
                ? `${settings.backend_upload}${item.icon_h5}`
                : `${settings.backend_upload}${item.icon_h5_before}`
                " alt="" />
              <img class="tab_item" v-else :src="isActive === item.id ? `${item.icon_h5}` : `${item.icon_h5_before}`"
                alt="" />
              <span>
                {{ unserialize(item.name, false) }}
              </span>
            </div>
          </li>
        </ul>
        <div class="right_menu" @click="right_menuClick">
          <iconpark-icon name="menu" size="32" />
        </div>
      </div>
      <!-- :style="contentStyle()" -->
      <div ref="anchorRef" class="home_continental">
        <div class="scorll_electronic_list-1"></div>
        <!-- 轮播图 -->
        <div class="swiperBox">
          <swiper :pagination="pagination" :autoplay="true" :delay="3000" :disableOnIntercation="false" v-if="lang"
            slidesPerView="auto" :spaceBetween="10 - 10" :centeredSlides="true" :modules="modules">
            <swiper-slide v-for="(item, key) in bannerArr" :key="key">
              <img class="swiper_img" w-full h-full :src="t(item)" @click="goActivity(t(item))" fit="cover" />
            </swiper-slide>
          </swiper>
        </div>

        <!-- 公告 v-if="showNoticeBar"-->

        <nut-noticebar @across-end="endToChangeNotice" :speed="noticeSpeed" class="swiper_message" v-if="lang"
          background="linear-gradient(180deg, #1B1F62 0%, #010223 100%)" color="#ffffff" :text="noticeMessage"
          :scrollable="true">
          <template #left-icon>
            <img class="laba" src="/imgs/home/laba.webp" alt="" />
          </template>
          <template #right-icon>
            <iconpark-icon name="mail" size="16" @click="router.push('/email')" />
            <div class="email_dot" v-if="myEmail.hasNoRead"></div>
          </template>
        </nut-noticebar>

        <!-- 登录入口 -->
        <ul v-if="!hasLogin" class="common_login_box enter_login_box">
          <li>
            <p>{{ t("home_page_not_login") }}</p>
            <p class="text_color">{{ t("home_page_login_discount") }}</p>
          </li>
          <li>
            <nut-animate type="ripple" action="click" @click="async () => {
              await User(pinia).setLogin(true);
            }
              ">
              <div class="header_button login">{{ t("home_page_login") }}</div>
            </nut-animate>
            <nut-animate type="ripple" action="click" @click="openRegister">
              <div class="header_button signup">{{ t("home_page_signUp") }}</div>
            </nut-animate>
          </li>
        </ul>
        <!-- 登录后信息展示 -->
        <ul v-else class="common_login_box login_info_box">
          <li>
            <p>
              <span>
                {{ userNameHiding(info.full_name || "") }}
              </span>
              <span class="text"> VIP {{ VIPinfo.current_vip_level }} </span>
            </p>
            <!-- <div class="user_info_mon_text">￥{{ Intl.NumberFormat().format(roleInfo.money) }}</div> -->
            <div class="user_info_mon_text">
              ₫ {{ convert2DisplayMoney(roleInfo.money) }}
            </div>
          </li>
          <li class="icon_list">
            <div @click="router.push('/deposit')">
              <ImgT src="/imgs/home/cunkuan.png" alt="" />
              <span>{{ t("home_page_deposit") }}</span>
            </div>
            <div @click="router.push('/withdrawals')">
              <ImgT src="/imgs/home/qukuan.png" alt="" />
              <span>{{ t("withdraw_page_withdraw") }}</span>
            </div>
            <div @click="router.push('/myWallet')">
              <ImgT src="/imgs/home/zhuanzhang.png" alt="" />
              <span>{{ t("Transfer") }}</span>
            </div>
            <div @click="router.push('/vip')">
              <ImgT src="/imgs/home/huangguang.png" alt="" />
              <span>{{ t("hall_vip") }}</span>
            </div>
          </li>
        </ul>

        <!-- 俱乐部 -->
        <HomeClub v-show="isActive == 0" />

        <!--  -->
        <HomeGameCube v-if="isActive == 1 || isActive == 2 || isActive == 5" :tabInfo="tabInfo" />

        <!-- 视讯-体育-彩票 -->
        <HomeGameDynamic v-if="isActive == 3 || isActive == 4 || isActive == 6" :tabInfo="tabInfo" />

        <!-- 最近中奖 -->
        <HomeWinning v-show="isActive != 0" />

        <!-- 公共轮播 -->
        <!-- <HomeCarouselControl v-show="isActive != 0 && isActive != -1" /> -->

        <!-- 公共热门游戏 -->
        <HomeGameHotBox v-if="isActive != 0 && isActive != -1" :tabInfo="tabInfo" />

        <!-- 优惠活动 -->
        <HomePromotions v-show="isActive == -1" />

        <!-- 最新赛事 -->
        <HomeEvent v-if="isActive == -1" />

        <!-- 热门和各类场馆游戏 -->
        <HomeGamebox v-show="isActive == -1" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, onMounted, ref } from "vue";
import { i18n } from "@/languages";
import { storeToRefs } from "pinia";
import pinia from "@/store/index";
import { useI18n } from "vue-i18n";
import { Local } from "@/utils/storage";
import HomeHeader from "./components/homeHeader.vue";
import HomeWinning from "./components/homeWinning.vue";
import HomePromotions from "./components/homePromotions.vue";
import HomeEvent from "./components/homeEvent.vue";
import HomeClub from "./components/homeClub.vue";
import HomeGamebox from "./components/homeGamebox.vue";
import HomeGameCube from "./components/homeGameCube.vue";
import HomeGameDynamic from "./components/homeGameDynamic.vue";
// import HomeCarouselControl from './components/homeCarouselControl.vue';
import HomeGameHotBox from "./components/homeGameHotBox.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper/modules";

import "swiper/css";
import "swiper/css/pagination"; // 轮播图底面的小圆点
import "swiper/css/pagination";
import { useRouter } from "vue-router";

import { User } from "@/store/user";
import { Page } from "@/store/page";

import { unserialize, convert2DisplayMoney } from "@/utils/useStoreMethods";
import { userNameHiding } from "@/utils/publicMethods";
const router = useRouter();
const { VIPinfo, info, hasLogin, roleInfo, isLogin, myEmail } = storeToRefs(
  User(pinia)
);
const {
  lang,
  bannerArr,
  settings,
  homeGameData,
  textAnnouncement,
  showLeft,
} = storeToRefs(Page(pinia));
const tabRef = ref();
const { t } = useI18n();
const isActive = ref(-1);
// const contentStyle = () => {
//   return { height: `calc(${appHeight.value}px - 50vw)` };
// };
let gameTabs: any = ref([
  {
    id: -1,
    icon_h5: "/imgs/home/tab-1.webp",
    icon_h5_before: "/imgs/home/tab-1-1.webp",
    name: { "en-US": "All", "vi-VN": "tất cả", "zh-CN": "全部" },
  },
  // {
  //   id: 0,
  //   icon_h5: '/imgs/home/tab0.webp',
  //   icon_h5_before: '/imgs/home/tab0-1.webp',
  //   name: { 'en-US': "Club", 'vi-VN': "câu lạc bộ", 'zh-CN': "俱乐部" }
  // }
]);

const getHomeData = () => {
  let arr = homeGameData.value.filter((e: any) => e.id != 0);
  gameTabs.value = gameTabs.value.concat(arr);
};

const right_menuClick = () => {
  if (hasLogin.value) {
    showLeft.value = !showLeft.value;
  } else {
    isLogin.value = true;
  }
};
const getQueryParams = (url: string) => {
  const paramArr = url.slice(url.indexOf("?") + 1).split("&");
  const params: any = {};
  paramArr.map((param) => {
    const [key, val] = param.split("=");
    params[key] = decodeURIComponent(val);
  });
  return params;
};
const goActivity = (url: string) => {
  if (hasLogin.value) {
    let params = getQueryParams(url);
    if (params.category_jump == 1) {
      router.push({
        path: "/activityDetail",
        query: params,
      });
    }
  }
};
const noticeStartIndex = ref(0);
const endToChangeNotice = () => {
  // 轮播消息结束触发的事件
  noticeStartIndex.value += 1;
  const index = noticeStartIndex.value;
  const length = textAnnouncement.value.length;
  if (index >= length) {
    noticeStartIndex.value = 0;
  }
};
const noticeMessage = computed(() => {
  // 轮播消息
  if (textAnnouncement.value) {
    let index = noticeStartIndex.value;
    if (index > textAnnouncement.value.length) {
      index = 0;
    }
    let text = t(textAnnouncement.value[index] || '');
    return text;
  }
  return "";
});
const noticeSpeed = computed(() => {
  if (!noticeMessage.value.length) return 0;
  // 基准20个字  速率50  最高50    那么10个字 速率为25
  if (noticeMessage.value.length > 20) return 50;
  return Math.ceil((50 * noticeMessage.value.length) / 20);
});

const pagination = ref({
  clickable: true,
});
const modules = [Autoplay, Pagination];
// const navigation = ref({
//   nextEl: ".swiper-button-next",
//   prevEl: ".swiper-button-prev",
// });

const openRegister = async () => {
  await User(pinia).setReg(true);
};

const anchorRef = ref<any>(null);
const tabInfo = ref<any>({});
const handleTabs = (_val: any) => {
  Local.set("kingInfo", _val);
  isActive.value = _val.id;
  tabInfo.value = _val;
  // if(_val.id === 0) {
  //   alert('敬请期待')
  //   return
  // } else {
  //   isActive.value = _val.id
  //   tabInfo.value = _val
  // }
};

onBeforeMount(() => {
  i18n.global.locale.value = lang.value;
  if (Local.get("kingInfo")) handleTabs(Local.get("kingInfo"));
  getHomeData();
});
onMounted(() => {
  tabRef.value.addEventListener(
    "touchmove",
    (e: any) => {
      console.log(e);
      e.stopPropagation();
    },
    { passive: false }
  );
});
</script>

<style lang="scss" scoped>
.swiper-button-next {
  width: 40px;
  height: 40px;
  background-color: #5b6cff;
}

.swiper-button-prev {
  width: 40px;
  height: 40px;
  background-color: #fdc401;
}

.app_bg {
  position: absolute;
  height: 300px;
  width: 100%;
  top: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(255, 45, 45, 0.18) 0%,
      rgba(255, 45, 45, 0.12) 42.86%,
      rgba(255, 45, 45, 0) 100%);
}

.home {
  // margin-bottom: 20px;
  height: 100%;
  overflow: auto;
  // padding-bottom: 100px;

  .laba {
    width: 16px;
  }

  .custom_tab {
    width: 100%;
    padding: 0 15px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;

    .custom_tab_ul {
      width: calc(100vw - 72px);
      height: 34px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      white-space: nowrap;
      overflow-x: auto;

      .custom_tab_li {
        margin-right: 12px;
        height: 80%;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;
        text-align: left;

        .custom_tab_item {
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .tab_item {
            width: 14px;
            height: 14px;
            margin-right: 5px;
          }
        }
      }

      .custom_tab_item_active {
        color: #5b6cff;
        border-bottom: 2px solid #501dc0;
      }
    }

    .right_menu {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .home_continental {
    margin-top: 12px;
    height: calc(100vh - 215px);
    padding-bottom: 40px;
    overflow: auto;

    .swiper_message {
      width: 100%;

      display: inline-block;
      margin: 21px auto 0;

      :deep(.nut-noticebar__page) {
        width: 347px;
        height: 28px;
        line-height: 28px;
        margin: 0 auto;
        padding: 0;
        border-radius: 8px;
      }

      .email_dot {
        position: absolute;
        top: 5px;
        right: 10px;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background-color: red;
        animation: dot-info-animal 1.6s infinite ease-in-out;
      }

      @keyframes dot-info-animal {
        0% {
          opacity: 0.3;
          transform: scale(0.9);
        }

        50% {
          opacity: 0.7;
          transform: scale(1.12);
        }

        100% {
          opacity: 0.3;
          transform: scale(0.9);
        }
      }
    }

    .common_login_box {
      gap: 0px;
      color: #fcfffa;
      margin: 8px 14px 14px;
      border-radius: 8px;
      background-color: #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 500;
      line-height: 14px;
      text-align: left;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text_color {
        font-size: 12px;
        color: #c6c4f5;
        margin-top: 10px;
      }

      .login {
        text-align: center;
        width: 64px;
        line-height: 32px;
        gap: 0px;
        margin-right: 8px;
        border-radius: 8px;
        background: #282747;
        box-shadow: 0.5px 0.5px 1px 0px #4b4a6e inset;
      }

      .signup {
        text-align: center;
        width: 64px;
        line-height: 32px;
        gap: 0px;
        border-radius: 8px;
        background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
        box-shadow: 0.5px 0.5px 1px 0px #9b9eff inset;
      }

      .user_info_mon_text {
        font-family: DINPro;
        font-size: 18px;
        font-weight: 700;
        line-height: 18px;
        text-align: left;
        margin-top: 8px;
      }

      .icon_list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // display: grid;
        // grid-template-columns: 1fr 1fr 1fr 1fr;
        // grid-column-gap: 2px;

        div {
          display: flex;
          flex-direction: column;
          //justify-content: space-between;
          align-items: center;
          margin: 0 2px;

          img {
            width: 36px;
            height: 36px;
          }

          span {
            margin-top: 8px;
            font-family: PingFang SC;
            font-size: 10px;
            font-weight: 500;
            line-height: 16px;
            text-align: left;
          }
        }
      }
    }

    .enter_login_box {
      padding: 18px 12px;

      li {
        display: flex;
        flex-wrap: nowrap;
      }

      :first-child {
        flex-direction: column;
      }
    }

    .login_info_box {
      padding: 10px 12px;

      .text {
        position: relative;
        margin-left: 14px;
        padding: 2px 10px 2px 2px;
        background: url("/imgs/home/vip1.webp") no-repeat;
        background-size: 100% 100%;
        font-family: SF Pro;
        font-size: 12px;
        font-style: italic;
        font-weight: 700;
        line-height: 12px;
        text-align: left;

        &::after {
          content: "";
          /* 必须定义 content，伪元素才会显示 */
          position: absolute;
          /* 相对于 .container 定位 */
          top: 2px;
          left: -7px;
          width: 14px;
          height: 14px;
          background-image: url("/imgs/home/vip.webp");
          /* 替换为实际图片路径 */
          background-size: cover;
          /* 确保背景图填充伪元素 */
          background-position: center;

          /* 可选：调整透明度 */
          z-index: 2;
          /* 如果需要覆盖其他内容 */
          border-radius: 10px;
          /* 可选：伪元素圆角 */
        }
      }
    }
  }

  .swiperBox {
    position: relative;
    width: 100%;

    .swiper-slide {
      width: 331px;
      height: 148px;
      transition: all 0.3s ease-in-out;

      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }

    .swiper-slide-prev {
      transform: scale(0.92);
    }

    .swiper-slide-next {
      transform: scale(0.92);
    }
  }
}
</style>
